<template>
<div>
  <div class="head">
    <span class="head_title">WallPaper</span>
    <span  class="link" @click="() => {
            this.$router.push('/register');
          }">去注册</span>
    <span v-show="isLogin" class="link">{{"你好"+uname}}</span>
  </div>
  <div class="center">
    <div class="login_body">
      <div class="info">登陆</div>
      <div class="inputs">
        <form>
          <label>
            <input class="input-text" type="username" name="username" v-model="username" placeholder="帐号">
          </label>
          <label>
            <input class="input-text" type="password" name="password" v-model="password" placeholder="密码">
          </label>
          <input class="input-text" type="text" placeholder="验证码" v-model="captcha">
          <div style="margin-top: 5px" @click="callCaptcha()" v-html="captchaSrc" ></div>
          <div @click="handleLogin" id="button" >登陆</div>
        </form>


      </div>
    </div>
    <div class="image">
      <img style="height: 100px; width: 90%;margin-top: 30%" src="https://pic1.zhimg.com/80/v2-5d3b5faabb524269ed931c63618b3dc1_r.jpg" alt="">
    </div>
  </div>
</div>
</template>

<script>
//import {login} from "@/API";
import {getCaptcha} from "@/API/UserAPI";
import {login} from "@/API/UserAPI";

export default {
  name: "Login",
  data(){
    return{
      uname:"",
      username:"",
      password:"",
      captcha:"",
      captchaSrc:"",
      captchaId:"",
      isLogin:false,
      test:"",
    };
  },

  methods:{

    callCaptcha(){
      getCaptcha().then(res => {
        this.captchaSrc = res.data
        this.captchaId=res.id
        console.log(this.captchaId)
      })
    },
    handleLogin(){
      this.$router.push('/main/company');
      login({url:"/api/login",data: {
          username: this.username,
          password: this.password,
          captcha: this.captcha,
          id: this.captchaId
        }}).then(res => {
        if (res.flag===1) {
          alert("登陆成功")

          this.username=res.username;
          localStorage.setItem('uname',res.username)

        }
        if(res.flag===0){
          alert(res.message)
        }
      })
    }
  },
}
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.head {
  width: 100%;
  height: 60px;
  background-color: #dbe4ff;

}

.link {
  float: right;
  text-decoration: none;
  color: black;
  margin-right: 20px;
  margin-top: 15px;
  cursor: pointer;

}

.head_title {
  font-size: 40px;
  padding-left: 20px;
}

.center {
  /*background-color: rgba(219, 228, 255,0.7);*/
  position: relative;
  width: 100%;
  margin-top: 100px;
  height: 500px;
}

.login_body {
  position: absolute;
  width: 40%;
  margin-left: 55%;
  background-color: #dbe4ff;
  opacity: 0.6;
  height: 500px;
  border-radius: 20px;

}

.info {
  text-align: center;
  font-size: 30px;
  padding-top: 20px;
}

.inputs {
  width: 70%;
  margin-top: 10%;
  margin-left: 15%;
}

#button {
  margin-left: 25%;
  padding-top: 7px;
  width: 50%;
  margin-top: 10%;
  border-radius: 10px;
  background-color: cornflowerblue;
  font-weight: bold;
  font-size: large;
  text-align: center;
  cursor: pointer;
  height: 30px;
}

input,
button {
  margin-top: 5%;
  width: 100%;
  height: 44px;
  border: none;
  /* 元素周围的轮廓无效 */
  outline: none;
  /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 */
  box-sizing: border-box;
  display: block;
  padding: 0 16px;
  cursor: pointer;
}
.image{
  margin-left: 7%;
  position: absolute;
  width: 43%;
  height: 500px;
}
</style>